<template>
  <div class="phoneTao">
    <div class="phoneLogin">
      <div class="zbar">
        <div class="denglu">
          登录
        </div>

      </div>
      <div class="zcnt">
        <div class="zcnt-main">
          <div class="login-list">
            <div class="login">
              <div class="u-main">
                <div class="u-plt"></div>
                <div class="DL">
                  <!-- <a href="#" @click="PhoneLogin">
                    <p>手机号登录</p>
                  </a> -->
                  <el-button
                    plain
                    @click="PhoneLogin"
                  >
                    登录
                  </el-button>
                </div>
                <div class="ZC">
                  <!-- <a href="#">
                    <p>注 &nbsp;&nbsp;册</p>
                  </a> -->
                  <el-button
                    plain
                    @click="PhoneLoginZC"
                  >
                    注册
                  </el-button>

                </div>
              </div>
              <div class="u-alt">
                <ul>
                  <li>
                    <a href="javascript:;">
                      <i class="i1"></i>
                      微信登录
                    </a>
                  </li>
                  <li>
                    <a
                      href="https://music.163.com/api/sns/authorize?snsType=5&clientType=web2&callbackType=Login&forcelogin=true"
                      class="QQdenglu"
                    >
                      <i class="i2"></i>
                      QQ登录
                    </a>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <i class="i3"></i>
                      微博登录
                    </a>
                  </li>
                  <li>
                    <a href="javascript:;">
                      <i class="i4"></i>
                      网易邮箱账号登录
                    </a>
                  </li>
                </ul>
              </div>
              <div class="u-FW">
                <input
                  type="checkbox"
                  v-model="isCheck"
                  :checked="isCheck"
                >
                <label
                  for=""
                  :class="{Color:isCheck,withe:!isCheck}"
                >同意</label>
                <a
                  href="http://st.music.163.com/official-terms/service"
                  target="_blank"
                  style="color:#507DAF"
                  class="A1"
                >《服务条款》</a>
                <a
                  href="http://st.music.163.com/official-terms/privacy"
                  target="_blank"
                  style="color:#507DAF"
                  class="A2"
                >《隐私政策》</a>
                <a
                  href="https://st.music.163.com/official-terms/children"
                  target="_blank"
                  style="color:#507DAF"
                  class="A3"
                >《儿童隐私政策》</a>
              </div>
            </div>
            <div
              class="scan"
              @click="TZewm"
            ></div>
          </div>
        </div>
      </div>
      <span
        class="zcls"
        @click="zcls"
      >×</span>
    </div>
  </div>
</template>
<script>
export default {
 data: () => ({
   isCheck:false,
   DLorZC:false
 }),
  created() {

  },
  methods: {
    TZewm(){
      this.$store.commit('QiTa')
    },
    zcls(){
      let dengLu=document.querySelector(".dengLu")
      dengLu.style.display="none"
    },
    PhoneLogin(){
      let phoneLogin=document.querySelector(".phoneLogin")
      let ZDL=document.querySelector(".ZDL")
      this.DLorZC=true
      if(!this.isCheck){
        this.$notify.error({
          title: '错误',
          message: '请先勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》'
        });
        return
      }
      phoneLogin.style.display="none";
      ZDL.style.display="block";
    },
    PhoneLoginZC(){
      let phoneLogin=document.querySelector(".phoneLogin")
       let ZZC=document.querySelector(".ZZC")
      this.DLorZC=true
      if(!this.isCheck){
        this.$notify.error({
          title: '错误',
          message: '请先勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》'
        });
        return
      }
      ZZC.style.display="block";
      phoneLogin.style.display="none";


    }
  },
  components:{}
};
</script>
<style lang="less">
.phoneTao{
    font-size: 12px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
  .phoneLogin{
    top: 150px;
    left: 500px;
    position: fixed;
    z-index: 20;
    width: 530px;
    border-radius: 4px;
    box-shadow: 0 5px 16px rgba(0,0,0,0.8);
    border: none;
    background: #fff;
      .zbar{
        background: url('../../../assets/cyzimgs/BJT1.png');
        position: relative;
        z-index: 10;
        border-bottom: 1px solid #191919;
        border-radius: 4px 4px 0 0;
        background: #2d2d2d;
        user-select: none;
        line-height: 30px;
          .denglu{
            user-select: none;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 45px;
            margin: 0;
            height: 38px;
            line-height: 38px;
            padding-left: 18px;
            border-radius: 3px 3px 0 0;
            font-weight: bold;
            font-size: 14px;
            color: #fff;
            background-position: 50% 0;
          }
      }
      .zcnt{
        padding: 0;
        border: 1px solid #878787;
        border-width: 0 1px 1px;
        border-radius: 0 0 4px 4px;
        background: #fff;
        display: block;
          .zcnt-main{
            padding: 0;
            position: relative;
            zoom: 1;
            .login-list{
              min-height: 332px;
              display: block;
              word-break: break-word;
                .login{
                  padding: 40px 0 39px;
                    .u-main{
                      float: left;
                      width: 224px;
                      padding: 0 35px 3px 40px;
                      border-right: 1px dotted #ccc;
                        .u-plt{
                          height: 120px;
                          background: url('../../../assets/cyzimgs/DLZC.png') no-repeat 13px 0;
                        }
                        .DL{
                          margin-top: 10px;
                          word-break: break-word;
                          .el-button{
                            border: 1px solid #999;
                            width: 223px;
                            height: 33px;
                              span{
                                line-height: 0px;
                              }
                          }
                            a{
                              background: url('../../../assets/cyzimgs/xuebitu8.png');
                              width: 219px;
                              color: #fff;
                              background-position: right -428px;
                              text-decoration: none;
                              padding: 0 5px 0 0;
                              white-space: nowrap;
                              display: inline-block;
                              height: 31px;
                              line-height: 31px;
                              overflow: hidden;
                              vertical-align: top;
                              text-align: center;
                              cursor: pointer;
                                p{
                                  width: 184px;
                                  color: #fff;
                                  background: url('../../../assets/cyzimgs/xuebitu8.png');
                                  background-position: 0 -387px;
                                  padding: 0 15px 0 20px;
                                  pointer-events: none;
                                  display: inline-block;
                                  height: 31px;
                                  line-height: 31px;
                                  overflow: hidden;
                                  vertical-align: top;
                                  text-align: center;
                                  cursor: pointer;
                                }
                            }
                        }
                        .ZC{
                          margin-top: 10px;
                          word-break: break-word;
                           .el-button{
                            border: 1px solid #999;
                            width: 223px;
                            height: 33px;
                              span{
                                line-height: 0px;
                              }
                          }
                            a{
                              width: 219px;
                              color: #333;
                              background: url('../../../assets/cyzimgs/xuebitu8.png');
                              background-position: right -100px;
                              text-decoration: none;
                              padding: 0 5px 0 0;
                              white-space: nowrap;
                              display: inline-block;
                              height: 31px;
                              line-height: 31px;
                              overflow: hidden;
                              vertical-align: top;
                              text-align: center;
                              cursor: pointer;
                                p{
                                  width: 184px;
                                  color: #333;
                                  background: url('../../../assets/cyzimgs/xuebitu8.png');
                                  background-position: 0 -59px;
                                  padding: 0 15px 0 20px;
                                  pointer-events: none;
                                  display: inline-block;
                                  height: 31px;
                                  line-height: 31px;
                                  overflow: hidden;
                                  vertical-align: top;
                                  text-align: center;
                                  cursor: pointer;
                                }
                            }
                        }
                    }
                    .u-alt{
                      float: left;
                      padding: 3px 0 3px 39px;
                      margin-top: -15px;
                      display: block;
                      ul{
                        padding: 0;
                        display: block;
                        margin: 0;
                          li{
                            width: 160px;
                            height: 40px;
                            margin-top: 15px;
                            list-style: none;
                            display: list-item;
                            text-align: -webkit-match-parent;
                            .QQdenglu:hover{
                              text-decoration: underline;
                            }
                              a{
                                font-size: 12px;
                                color: #333;
                                line-height: 38px;
                                cursor: pointer;
                                text-decoration: none;
                                list-style: none;
                                word-break: break-word;
                                i{
                                   width: 39px;
                                    height: 38px;
                                    display: inline-block;
                                    vertical-align: middle;
                                    cursor: pointer;
                                    font-style: normal;
                                    text-align: left;
                                    font-size: inherit;
                                    list-style: none;
                                }
                                  .i1{
                                    background: url('../../../assets/cyzimgs/xuebitu14.png');
                                    margin-right: 14px;
                                    background-position: -150px -670px;
                                  }
                                   .i2{
                                    background: url('../../../assets/cyzimgs/xuebitu14.png');
                                    margin-right: 14px;
                                    background-position: -190px -670px;
                                  }
                                   .i3{
                                    background: url('../../../assets/cyzimgs/xuebitu14.png');
                                    margin-right: 14px;
                                    background-position: -230px -670px;
                                  }
                                   .i4{
                                    background: url('../../../assets/cyzimgs/xuebitu14.png');
                                    margin-right: 14px;
                                    background-position: -270px -670px;
                                  }
                              }
                          }
                      }
                    }
                    .u-FW{
                      white-space: nowrap;
                      float: left;
                      margin-left: 40px;
                      margin-top: 30px;
                      font-family: NotoSansHans-Regular;
                      font-size: 10px;
                      color: rgba(0,0,0,0.40);
                      line-height: 15px;
                      word-break: break-word;
                      .Color{
                            color:blue
                        }
                        .withe{
                          color: #666;
                        }
                        input{
                          position: absolute;
                          top: 281px;
                          left: 60px;
                          background-color: initial;
                          cursor: default;
                          appearance: checkbox;
                          box-sizing: border-box;
                          margin: 3px 3px 3px 4px;
                          padding: initial;
                          border: initial;
                          padding: 0;
                          margin: 0;
                          font-size: 12px;
                          color: #333;
                          font-family: Arial, Helvetica, sans-serif;
                          white-space: nowrap;
                        }
                        label{
                              margin-left: 2px;
                              cursor: default;
                              white-space: nowrap;
                              float: left;
                              margin-left: 40px;
                              font-family: NotoSansHans-Regular;
                              font-size: 10px;
                              color: rgba(0,0,0,0.40);
                              line-height: 15px;
                        }
                        .A1:hover{
                          text-decoration: underline;
                        }
                        .A2:hover{
                          text-decoration: underline;
                        }
                        .A3:hover{
                          text-decoration: underline;
                        }
                    }
                }
                .login::after{
                  clear: both;
                  content: '.';
                  display: block;
                  height: 0;
                  visibility: hidden;
                }
                .scan{
                  background: url('../../../assets/cyzimgs/EWMjiao.png');
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  width: 52px;
                  height: 52px;
                  background-size: contain;
                  cursor: pointer;
                }
            }
          }
      }
      .zcls{
        line-height: 20px;
        background: url('../../../assets/cyzimgs/BJT1.png');
        position: absolute;
        z-index: 19;
        top: 16px;
        right: 20px;
        width: 10px;
        height: 10px;
        overflow: hidden;
        text-indent: -9999px;
        cursor: pointer;
        background-position: 0 -95px;
      }
  }
}
</style>